<template>
  <div>
    <div class="public-title">历史记录</div>
    <!-- 过滤条件 -->
    <Breadcrumb class="filter-trem">
      <BreadcrumbItem class="filter-items" @click.native="logout">全部</BreadcrumbItem>
      <BreadcrumbItem class="filter-items" @click.native="logout">近一周</BreadcrumbItem>
      <BreadcrumbItem class="filter-items" @click.native="logout">近一月</BreadcrumbItem>
      <BreadcrumbItem class="filter-items" @click.native="logout">导出</BreadcrumbItem>
    </Breadcrumb>
    <Collapse accordion v-model="activeName">
      <Panel :name="index+''" v-for="(item,index) in historyList" :key="index">
        <span class="collapse-title-bar"> <em>
            <Icon type="ios-bookmark" /> <i> {{ item.productName }}</i></em> <em>
            <Icon type="ios-contact" /> <i> {{ item.name }}</i></em><em>
            <Icon type="md-pin" /> <i> {{ $GLOBAL.getCityResult(cityData,item.address) }}</i></em></span>
        <p slot="content">
          <ul class="cell-cust-wrap">
            <li class="cell-cust">
              <label class="cell-title">产品信息</label>
              <div class="cell-con"> {{ item.productName }}</div>
            </li>
            <li class="cell-cust">
              <label class="cell-title">联系人</label>
              <div class="cell-con">{{ item.name }}</div>
            </li>
            <li class="cell-cust">
              <label class="cell-title">联系方式</label>
              <div class="cell-con">{{ item.tel }}</div>
            </li>
            <li class="cell-cust">
              <label class="cell-title">所在区域</label>
              <div class="cell-con">{{ $GLOBAL.getCityResult(cityData,item.address) }}</div>
            </li>
            <li class="cell-cust">
              <label class="cell-title">咨询内容</label>
              <div class="cell-con">{{ item.content }}</div>
            </li>
            <li class="cell-cust">
              <label class="cell-title">咨询时间</label>
              <div class="cell-con">{{ $GLOBAL.timeFormat(item.sendTime) }}</div>
            </li>
          </ul>
        </p>
      </Panel>
      <img v-show="historyList.length == 0 " class="null" src="../../../assets/img/null.png">
    </Collapse>
    <br>
    <!-- 接单统计 -->
    <div class="public-title">接单统计</div>
    <div id="myChart" style="height: 350px;width: 100%;"></div>
  </div>
</template>

<script>
// 引入地区代码文件
import cityData from "../../../assets/lib/region.js";
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/toolbox");

export default {
  mounted() {
    this.drawLine();
    this.orderHistory();
    this.cityData = cityData;
  },
  data() {
    return {
      cityData: [],
      activeName: "1",
      xAxis: "", //统计日期
      pointListData: "", //点单数据
      receiveListData: "", //接单数据
      historyList: [] //接单历史数据
    };
  },
  methods: {
    //接单历史
    orderHistory() {
      this.$axios({
        method: "get",
        url: this.$GLOBAL.baseURL + "/api/order/getHistoryOrders",
        params: {
          startTime: ""
        }
      })
        .then(result => {
          if (result.data.code == 0) {
            var data = result.data.data.historyList.items;
            if (data.length) {
              this.historyList = data;
            }else{
              this.historyList = [];
            }
          }
        })
        .catch(err => {
          this.$Notice.error({
            title: "异常提示",
            desc: err.response.data.error
          });
        });
    },
    //绘制统计拆线图
    drawLine() {
      var that = this;
      this.$axios({
        method: "get",
        url: this.$GLOBAL.baseURL + "/api/team/mobile/census"
      })
        .then(result => {
          //整理数据格式
          var pointListDataObj = result.data.data.pointList;
          if (pointListDataObj.length) {
            this.xAxis = [];
            this.pointListData = [];
            pointListDataObj.map(item => {
              this.xAxis.push(item.time);
              this.pointListData.push(item.count);
            });
          }

          var receiveListDataObj = result.data.data.receiveList;
          if (receiveListDataObj.length) {
            this.receiveListData = [];
            receiveListDataObj.map(item => {
              this.receiveListData.push(item.count);
            });
          }

          // 初始化echarts实例
          var myChart = echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: {
              //   text: "一周业绩变化",
              textStyle: {
                fontSize: 12
              },
              left: "center"
            },
            tooltip: {
              trigger: "axis"
            },
            toolbox: {
              show: true, //是否显示工具栏组件
              orient: "vertical", //工具栏icon的布局朝向
              itemSize: 18, //工具栏icon的大小
              itemGap: 20, //item之间的间距
              right: 20, //toolbox的定位位置
              feature: {
                saveAsImage: { show: true }, //导出图片
                dataView: { show: true }, //数据视图
                magicType: {
                  //动态类型切换
                  type: ["line", "bar"]
                },
                dataZoom: { show: true }, //数据区域缩放
                restore: { show: true } //重置
              }
            },
            legend: {
              data: ["接单数", "点单数"]
              //   bottom: 0
            },

            xAxis: {
              type: "category",
              boundaryGap: false,
              data: that.xAxis || [
                "周一",
                "周二",
                "周三",
                "周四",
                "周五",
                "周六",
                "周日"
              ]
            },
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "接单数",
                type: "line",
                data: this.receiveListData || [0]
              },
              {
                name: "点单数",
                type: "line",
                data: this.pointListData || [0]
              }
            ]
          });
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
/* cell-cust */
.collapse-title-bar em {
  display: inline-block;
  width: 24%;
}
.collapse-title-bar em i {
  vertical-align: middle;
}
.cell-cust-wrap {
  padding-left: 46px;
}
.cell-cust {
  line-height: 24px;
  margin-bottom: 20px;
}
.cell-cust .cell-title {
  display: inline-block;
  width: 80px;
  color: #999;
}
.cell-cust .cell-con {
  display: inline-block;
  cursor: default;
  max-width: 646px;
  vertical-align: top;
}
/* function-btn-warp */
.function-btn-warp {
  text-align: right;
}
.filter-trem {
  text-align: right;
  padding-right: 6px;
  margin-bottom: 14px;
  margin-top: -36px;
}
/* filter-items */
.filter-items {
  cursor: pointer;
  color: #515a6e;
}
</style>